<template>
  <div>
    <el-container>
      <el-header style="display: flex;justify-content: space-between;align-items: center;padding-left: 0px">
        <el-button
          size="mini"
          type="success">
          <download-excel
            class="export-btn"
            :data="salaries"
            :fields="jsonFields"
            type="xls"
            :header="valueMonth"
            name="考勤表.xls"><i class="fa fa-lg fa-level-up"
                              style="margin-right: 5px"></i>导入考勤记录
          </download-excel>
        </el-button>
        <el-button
          style=""
          size="mini"
          type="success"
          @click="exportTable"><i class="fa fa-lg fa-level-down"
                                  style="margin-right: 5px"></i>导出考勤记录
        </el-button>
        <div class="block" style="width: 50px; margin-left: -260px">
          <el-date-picker
            v-model="valueMonth"
            align="right"
            type="month"
            @change="searchByDate"
            value-format="yyyy-MM-dd"
            placeholder="请通过月份搜索考勤记录..."
            size="mini">
          </el-date-picker>
        </div>
        <!--        <el-input-->
        <!--          placeholder="请通过员工姓名或者工号搜索..."-->
        <!--          clearable-->
        <!--          style="width: 250px;margin-right: 40px;padding: 0px;"-->
        <!--          size="mini"-->
        <!--          prefix-icon="el-icon-search"-->
        <!--          v-model="keywords">-->
        <!--        </el-input>-->
        <!--        <el-button @click="" icon="el-icon-search" style="margin-left: -350px"-->
        <!--                   type="primary" size="mini"-->
        <!--                   @click="searchTable">搜索员工</el-button>-->
        <el-button
          size="mini"
          type="success"
          @click="searchByDate"
          icon="el-icon-refresh">刷新数据
        </el-button>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <el-card>
            <el-table
              border
              :data="salaries"
              stripe
              v-loading="tableLoading"
              size="mini"
              background
              id="download"
              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="30">
              </el-table-column>
              <el-table-column
                min-width="15%"
                prop="name"
                align="center"
                label="员工姓名">
              </el-table-column>
              <el-table-column
                width="220"
                min-width="15%"
                prop="workID"
                align="center"
                label="工号">
              </el-table-column>
              <el-table-column
                width="200"
                min-width="15%"
                align="center"
                prop="lateCount"
                label="迟到次数">
                <!--考勤详情核心代码-->
                <template slot-scope="scope" style="text-align: center;">
                  <el-popover
                    placement="right"
                    width="500"
                    trigger="click">
                    <el-table
                      width="500"
                      size="mini"
                      :data="late[scope.$index].lateList"
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}"
                      stripe
                      border>
                      <el-table-column width="100" prop="empName"  label="员工姓名"></el-table-column>
                      <el-table-column width="100" label="日期" >
                        <template slot-scope="scope_date" style="text-align: center;">
                          {{ scope_date.row.ecDate | formatDate }}
                        </template>
                      </el-table-column>
                      <el-table-column width="150" prop="ecReason" label="原因"></el-table-column>
                      <el-table-column width="150" prop="remark" label="备注"></el-table-column>
                    </el-table>
                    <el-tag style="cursor: pointer" slot="reference" size="small" effect="dark" type="danger">{{ scope.row.lateCount }}</el-tag>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                align="center"
                min-width="15%"
                prop="leaveCount"
                label="请假次数">
                <template slot-scope="scope" style="text-align: center;">
                  <el-popover
                    placement="right"
                    width="500"
                    trigger="click">
                    <el-table
                      width="500"
                      size="mini"
                      :data="leave[scope.$index].leaveList"
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}"
                      stripe
                      border>
                      <el-table-column width="100" prop="empName"  label="员工姓名"></el-table-column>
                      <el-table-column width="100" label="日期">
                        <template slot-scope="scope_date" style="text-align: center;">
                          {{ scope_date.row.ecDate | formatDate }}
                        </template>
                      </el-table-column>
                      <el-table-column width="150" prop="ecReason" label="原因"></el-table-column>
                      <el-table-column width="150" prop="remark" label="备注"></el-table-column>
                    </el-table>
                    <el-tag style="cursor: pointer" slot="reference" size="small" effect="dark" type="primary">{{
                        scope.row.leaveCount
                      }}
                    </el-tag>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                prop="overtime"
                width="200"
                min-width="15%"
                align="center"
                label="加班次数">
                <template slot-scope="scope" style="text-align: center;">
                  <el-popover
                    placement="right"
                    width="500"
                    trigger="click">
                    <el-table
                      width="500"
                      size="mini"
                      :data="overtime[scope.$index].overtimeList"
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}"
                      stripe
                      border>
                      <el-table-column width="100" prop="empName"  label="员工姓名"></el-table-column>
                      <el-table-column width="100" label="日期">
                        <template slot-scope="scope_date" style="text-align: center;">
                          {{ scope_date.row.ecDate | formatDate }}
                        </template>
                      </el-table-column>
                      <el-table-column width="150" prop="ecReason" label="原因"></el-table-column>
                      <el-table-column width="150" prop="remark" label="备注"></el-table-column>
                    </el-table>
                    <el-tag style="cursor: pointer" size="small" slot="reference"  effect="dark" type="success">{{ scope.row.overtime }}</el-tag>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                prop="remark"
                width="200"
                min-width="15%"
                align="center"
                label="备注">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        <div style="justify-content: space-between;text-align: right;margin: 10px 2px 2px;" v-if="salaries!==0">
          <!--          <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="multipleSelection.length===0" @click="deleteAll">批量删除</el-button>-->
          <el-pagination
            background
            @size-change="sizeChange"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>

export default {
  data() {
    return {
      jsonFields: {  //导出Excel表格的表头设置
        '工号': 'workID',
        '姓名': 'name',
        '迟到次数': 'lateCount',
        '请假次数': 'leaveCount',
        '加班次数': 'overtime',
        '备注': 'remark'
      },
      dialogVisible: false,
      tableLoading: false,
      index: 0,
      keywords: '',
      valueMonth: '',
      salaries: [],
      totalCount: -1,
      currentPage: 1,
      pageSize: 10,
      multipleSelection: [],
      late: [],
      overtime: [],
      leave: [],
      salary: {
        id: '',
        workID: '',
        name: '',
        lateCount: '',
        leaveCount: '',
        overtime: '',
        remark: ''
      }
    };
  },
  created() {
    this.searchByWorkIDAndDate();
    setTimeout(()=>{
      //先让数据库的数据加载进去数组中
      this.searchByWorkIDAndDateOver();
      this.searchByWorkIDAndDateLeave();
    },500)
  },
  methods: {
    // 导出excel
    exportTable() {
      window.open("/salary/table/export", "_parent");
    },
    //根据员工ID和月份筛选详细的考勤记录
    searchByWorkIDAndDate() {
      this.late = [];
      this.getRequest("/salary/table/man/late?month=" + this.valueMonth).then(resp => {
        this.tableLoading = false;
        if (resp && resp.status === 200) {
          // var data = resp.data;
          // _this.trains = data.trains;
          let res = resp.data;
          for (let key in res) {
            this.late.push({eid: key, lateList: res[key]});
          }
        }
      });
    },
    //根据员工ID和月份筛选详细的考勤记录
    searchByWorkIDAndDateOver() {
      let _this = this;
      this.overtime = [];
      this.getRequest("/salary/table/man/overtime").then(resp => {
        this.tableLoading = false;
        if (resp && resp.status === 200) {
          // var data = resp.data;
          // _this.trains = data.trains;
          let res = resp.data;
          for (let key in res) {
            this.overtime.push({eid: key, overtimeList: res[key]});
          }
        }
      });
    },
    //根据员工ID和月份筛选详细的考勤记录
    searchByWorkIDAndDateLeave() {
      let _this = this;
      this.leave = [];
      this.getRequest("/salary/table/man/leave").then(resp => {
        this.tableLoading = false;
        if (resp && resp.status === 200) {
          // var data = resp.data;
          // _this.trains = data.trains;
          let res = resp.data;
          for (let key in res) {
            this.leave.push({eid: key, leaveList: res[key]});
          }
        }
      });
    },
    //根据时间筛选考勤记录
    searchByDate() {
      var _this = this;
      if (this.valueMonth !== '' && this.valueMonth !== null) {
        this.searchByWorkIDAndDate();
        setTimeout(()=>{
          //先让数据库的数据加载进去数组中
          this.searchByWorkIDAndDateOver();
          this.searchByWorkIDAndDateLeave();
        },500)
        this.getRequest("/salary/table/man/month/" + this.valueMonth + "?page=" + this.currentPage + "&size=" + this.pageSize).then(resp => {
          this.tableLoading = false;
          if (resp && resp.status === 200) {
            // var data = resp.data;
            // _this.trains = data.trains;
            _this.salaries = resp.data.salaries;
            _this.totalCount = resp.data.count;
          }
        });
      } else {
        this.searchByWorkIDAndDate();
        setTimeout(()=>{
          //先让数据库的数据加载进去数组中
          this.searchByWorkIDAndDateOver();
          this.searchByWorkIDAndDateLeave();
        },500)
        this.loadSalaryTable();
      }
    },
    deleteAll() {
      this.$confirm('删除[' + this.multipleSelection.length + ']条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = '';
        this.multipleSelection.forEach(row => {
          ids = ids + row.id + ",";
        })
        this.doDelete(ids);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      row.createDate = new Date(row.createDate);
      delete row.allSalary;
      this.salary = row;
    },
    handleDelete(index, row) {
      this.$confirm('删除[' + row.name + ']记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(row.id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    doDelete(id) {
      var _this = this;
      _this.tableLoading = true;
      this.deleteRequest("/salary/sob/salary/" + id).then(resp => {
        _this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;

          _this.loadSalaryTable();
        }
      });
    },
    loadSalaryTable() {
      this.tableLoading = true;
      var _this = this;
      this.getRequest("/salary/table/man?page=" + this.currentPage + "&size=" + this.pageSize).then(resp => {
        _this.tableLoading = false;
        if (resp && resp.status === 200) {
          var data = resp.data;
          _this.salaries = data.salaries;
          _this.totalCount = data.count;
        }
      })
    },
    sizeChange(size) {
      this.pageSize = size;
      this.searchByDate();
    },
    currentChange(page) {
      this.currentPage = page;
      this.searchByDate();
    },
    emptySalary() {
      this.salary = {
        id: '',
        name: '',
        workID: '',
        lateCount: '',
        leaveCount: '',
        overtime: '',
        remark: ''
      };
      this.index = 0;
    }
  },
  mounted: function () {
    this.loadSalaryTable();
  }
};
</script>
<style>
.el-dialog__body {
  padding-bottom: 10px;
}

.icon {
  width: 1.5em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
.el-button+.el-button {
  margin-left: -550px;
}
</style>
